<template>
    <div class="container">
        <!-- 流程部分 -->
        <div class="process-section">
            <h3>流程</h3>
            <!-- 工单流程 -->
            <div class="order-process">
                <h4>工单流程</h4>
                <div v-for="(flow, index) in orderFlows" :key="index" class="flow-item">
                    <span v-for="(step, sIndex) in flow" :key="sIndex" class="flow-step">
                        {{ step }}
                    </span>
                </div>
            </div>
            <!-- 工序流程 -->
            <div class="procedure-process">
                <h4>工序流程</h4>
                <div v-for="(flow, index) in procedureFlows" :key="index" class="flow-item">
                    <span v-for="(step, sIndex) in flow" :key="sIndex" class="flow-step">
                        {{ step }}
                    </span>
                </div>
            </div>
        </div>

        <!-- 工单状态 -->
        <div class="status-section">
            <h3>工单状态</h3>
            <div v-for="(status, index) in orderStatus" :key="index" class="status-item">
                <el-tag :type="status.type">{{ status.label }}</el-tag>
                <el-button v-if="status.buttons" v-for="(btn, btnIndex) in status.buttons" :key="btnIndex"
                    :text="btn.text" :type="btn.type" @click="handleStatusBtn(btn.action)"></el-button>
            </div>
        </div>

        <!-- 提示信息与确认框 -->
        <el-dialog v-model="dialogVisible" :title="dialogTitle" :message="dialogMsg" :type="dialogType"
            :show-close="false">
            <template #footer>
                <el-button text="知道了" @click="dialogVisible = false"></el-button>
            </template>
        </el-dialog>
        <el-dialog v-model="confirmDialogVisible" :title="confirmTitle" :message="confirmMsg" :type="confirmType">
            <template #footer>
                <el-button text="取消" @click="confirmDialogVisible = false"></el-button>
                <el-button type="primary" text="确定" @click="handleConfirm"></el-button>
            </template>
        </el-dialog>

        <!-- 列表工序状态 -->
        <div class="list-status-section">
            <h3>列表工序状态</h3>
            <div v-for="(status, index) in listStatus" :key="index" class="list-status-item">
                <span>{{ status.label }}</span>
                <el-progress :percentage="status.percent" :type="status.type" class="status-progress"></el-progress>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElTag, ElButton, ElDialog, ElProgress } from 'element-plus';

// 工单流程数据
const orderFlows = [
    ['下达', '上线', '完成', '重启', '上线'],
    ['下达', '上线', '关闭', '重启', '上线'],
    ['下达', '关闭', '重启', '上线']
];

// 工序流程数据
const procedureFlows = [
    ['下达', '开工', '报工时间小于计划，实际结束时间', '重启后实际开始时间仍报工操作错误才允许完成', '完成'],
    ['下达', '开工', '报工', '完成', '重启后实际开始时间仍报工操作错误才允许完成'],
    ['下达', '开工', '关闭', '重启后实际开始时间仍报工操作错误才允许完成'],
    ['下达', '开工', '报工', '关闭', '重启后实际开始时间仍报工操作错误才允许完成']
];

// 工单状态数据
const orderStatus = [
    { label: '已下达', type: 'primary', buttons: [{ text: '上线', type: 'primary' }, { text: '关闭', type: '' }] },
    { label: '已上线', type: 'success', buttons: [{ text: '完成', type: 'success' }, { text: '关闭', type: '' }] },
    { label: '已完成', type: 'info', buttons: [{ text: '重启', type: 'info' }] },
    { label: '已关闭', type: 'danger', buttons: [{ text: '完成', type: 'danger' }, { text: '重启', type: '' }] }
];

// 列表工序状态数据
const listStatus = [
    { label: '下达', percent: 0, type: 'line' },
    { label: '开工', percent: 20, type: 'line' },
    { label: '报工并质检', percent: 20, type: 'line' },
    { label: '关闭', percent: 20, type: 'line' },
    { label: '重启', percent: 20, type: 'line' },
    { label: '完工并质检', percent: 100, type: 'line' }
];

// 对话框状态
const dialogVisible = ref(false);
const dialogTitle = ref('提示信息');
const dialogMsg = ref('存在未报检报工记录，无法完工');
const dialogType = ref('error');

const confirmDialogVisible = ref(false);
const confirmTitle = ref('确认开工吗？');
const confirmMsg = ref('确定开始当前生产工序吗？');
const confirmType = ref('warning');

// 按钮处理
const handleStatusBtn = (action) => {
    if (action === 'open') {
        // 开工逻辑
    } else if (action === 'close') {
        // 关闭逻辑
    }
};

const handleConfirm = () => {
    confirmDialogVisible.value = false;
};
</script>

<style scoped>
.container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.process-section {
    width: 100%;
    max-width: 600px;
}

.flow-item {
    margin: 10px 0;
    display: flex;
    gap: 5px;
}

.flow-step {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f9f9f9;
}

.status-section {
    width: 100%;
    max-width: 300px;
}

.status-item {
    margin: 10px 0;
}

.list-status-section {
    width: 100%;
    max-width: 300px;
}

.list-status-item {
    margin: 5px 0;
}

.status-progress {
    width: 100%;
}
</style>